<template>
  <div v-if="isShowEcharts && showNum != 0" class="parent">
    <echartsDom v-if="isShowEcharts && showNum != 0" :width="'100%'" :height="'351px'" :option="option" />
    <p v-if="isShowEcharts && showNum != 0" style="width: 100%; text-align: center">{{ name }}</p>
    <div v-else>
      <px-empty :image-size="50" />
      <p style="width: 100%; text-align: center">{{ name }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";

import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  showNum: {
    type: Number,
    default: 1
  },
  chartValue: {
    type: Object,
    default: () => {}
  },
  charttitle: {
    type: String,
    default: ""
  },
  facilityId: {
    type: String,
    default: ""
  },
  estimateMonth: {
    type: String,
    default: ""
  },
  name: {
    type: String,
    default: ""
  }
});
import { gradients } from "@/api/doubleCarbonManage/chartscolor";
import { accountingReportqueryFacilityDailyEmission } from "@/api/doubleCarbonManage/accountingManage";
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  accountingReportqueryFacilityDailyEmission({
    facilityId: props.facilityId,
    estimateMonth: props.estimateMonth
  }).then(res => {
    if (res != null) {
      isShowEcharts.value = true;
      option.value = {
        color: ["#39C670 ", "#3B82F6", "#28D892", "#FF5639"],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: "点击保存为图片"
            }
          }
        },
        grid: {
          left: "20px",
          top: "50px",
          right: "10px",
          bottom: "10px",
          containLabel: true
        },
        legend: {
          type: "scroll",
          width: "70%"
        },
        tooltip: {
          confine: true
        },
        xAxis: {
          type: "category",
          boundarGap: false,
          // data: response.xaxis
          data: res.xaxis,
          axisLabel: {
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          name: "tCO₂e",
          type: "value"
        },
        series: {
          data: res.yaxis[0].value,
          type: "bar",
          name: res.yaxis[0].name,
          stack: "total",
          label: {
            show: true,
            position: "top",
            formatter: "{c}"
          },
          // label: {
          //   show: true,
          //   color: "black"
          // },
          emphasis: {
            focus: "series"
          }
        }
      };
    } else {
      isShowEcharts.value = false;
    }
  });
  // isShowEcharts.value = true;
  // option.value = {
  //   title: {
  //     text: props.charttitle,
  //     left: "center"
  //   },
  //   grid: {
  //     left: "20px",
  //     top: "60px",
  //     right: "10px",
  //     bottom: "10px",
  //     containLabel: true
  //   },
  //   // legend: {},
  //   tooltip: {
  //     trigger: "item"
  //   },
  //   legend: {
  //     top: "23",
  //     type: "scroll",
  //     width: "60%"
  //   },
  //   label: {
  //     formatter: "{b}: {d}%"
  //   },
  //   series: [
  //     {
  //       data: props.chartValue.map(item => {
  //         return {
  //           name: item.gasType,
  //           value: item.carbonEmission
  //         };
  //       }),
  //       type: "pie",
  //       name: props.charttitle,
  //       emphasis: {
  //         focus: "series"
  //       },
  //       radius: "60%",
  //       itemStyle: {
  //         normal: {
  //           color: function (params) {
  //             var colorList = gradients;
  //             return colorList[params.dataIndex];
  //           }
  //         }
  //       }
  //     }
  //   ]
  // };
};
watch(
  () => props.facilityId,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
